<template>
    <div>
        <dialog-alert :data="alertData" @on-close="onCloseUploadAlert()" @on-confirm="onConfirmUploadAlert()">
            <div class="dialog-alert">
                <table class="d-a_other-info">
                    <tr class="input">
                        <td class="r-title">朝代：</td>
                        <!-- <td><input type="text" v-model="authorInfo.dynasty"></td> -->
                        <td>
                            <el-select v-model="authorInfo.dynasty" class="m-2" placeholder="秦">
                                <el-option v-for="item in dynasty" :key="item.did" :label="item.d_name" :value="item.did" />
                            </el-select>
                        </td>
                    </tr>
                    <tr class="input">
                        <td class="r-title">姓名：</td>
                        <td><input type="text" v-model="authorInfo.name"></td>
                    </tr>
                    <tr class="input">
                        <td class="r-title">生辰：</td>
                        <td><input type="text" v-model="authorInfo.time"></td>
                    </tr>
                    <tr>
                        <td class="r-title">生平简介：</td>
                        <td><textarea v-model="authorInfo.synopsis" cols="90" rows="7"></textarea></td>
                    </tr>
                </table>
            </div>
        </dialog-alert>
    </div>
    <!-- <dialog-alert v-if="isShowAlert == 'success'" :data="sucessData" @on-confirm="onConfirm" @on-close="onCancel"></dialog-alert>
    <dialog-alert v-if="isShowAlert == 'failure'" :data="failData" @on-confirm="onConfirm" @on-close="onCancel"></dialog-alert>
    <dialog-alert v-if="isShowAlert == 'bannerImageEmpty'" :data="bannerImageEmptyData" @on-confirm="onConfirm"></dialog-alert> -->
    <dialog-alert v-if="isShowAlert == 'addSuccess'" :data="addSuccessData" @on-confirm="onConfirm" @on-close="onCancel"></dialog-alert>
    <dialog-alert v-if="isShowAlert == 'addFailure'" :data="addFailureData" @on-confirm="onConfirm"></dialog-alert>
</template>

<script setup lang="ts">
import { nextTick, onMounted, reactive, ref, toRefs } from 'vue'
import { IAuthorListModel, IAuthorModel, IDynastyModel } from '../../manage-author.model'
import manageAuthorStore from '../../manage-author.store'
import { ElMessage } from 'element-plus'

const manageAuthorSe = manageAuthorStore()
const props = defineProps({
    type: {
        type: String,
        default: ''
    },
    searchType: {
        type: String,
        default: ''
    },
    searchInput: {
        type: String,
        default: ''
    }
})
const { type, searchType, searchInput } = toRefs(props)

const authorInfo = reactive({
    aid: '',
    dynasty: '',   // 朝代
    name: '',    // 姓名
    time: '',    // 生辰
    synopsis: '',    // 生平简介
}) as IAuthorModel

// 更新信息时给输入框赋值
const assignValueToInput = (value: IAuthorListModel) => {
    authorInfo.aid = value.author_id
    authorInfo.dynasty = value.d_name
    authorInfo.name = value.a_name
    authorInfo.time = value.a_time
    authorInfo.synopsis = value.a_synopsis
}
defineExpose({
    assignValueToInput
})

const emits = defineEmits(['onCloseEditAuthorAlert', 'getAuthorList', 'on-confirm', 'closeUploadAlert', 'searchInfo'])

// 添加成功或失败时的弹窗
let isShowAlert = ref<string>('')
// 添加成功弹窗
const addSuccessData = {
    title: '添加成功',
    message: '添加作者信息成功！是否继续添加？',
    confirmTitle: '确认',
    cancleTitle: '取消',
    isShowCancleBtn: true
}
// 添加失败
const addFailureData = {
    title: '添加失败',
    message: '添加作者信息失败！',
    confirmTitle: '确认',
}
// 点击取消
const onCancel = () => {
    authorInfo.name = ''
    authorInfo.time = ''
    authorInfo.synopsis = ''
    isShowAlert.value = ''
    emits('onCloseEditAuthorAlert')
    emits('getAuthorList')
}
// 点击确认
const onConfirm = () => {
    if(isShowAlert.value == 'addFailure') {
        isShowAlert.value = ''
        return
    }
    authorInfo.name = ''
    authorInfo.time = ''
    authorInfo.synopsis = ''
    isShowAlert.value = ''
}

// 添加作者时弹窗信息
const alertData = {
    title: type.value == 'change' ? '更改作者信息' : '添加作者信息',
    confirmTitle: type.value == 'change' ? '更改' : '添加',
    isShowCancleBtn: true,
    cancleTitle: '取消',
    isShowClose: true,
    size: 'large'
}
// 弹窗内点击取消时
let isShowUploadAlert = ref<boolean>(false)
const onCloseUploadAlert = () => {
    isShowUploadAlert.value = false
    authorInfo.dynasty = ''
    authorInfo.name = ''
    authorInfo.time = ''
    authorInfo.synopsis = ''
    emits('onCloseEditAuthorAlert')
}
// 弹窗内点击确认时
const onConfirmUploadAlert = () => {
    let regx = /^[\u4E00-\u9FA5]+$/g
    if(!authorInfo.dynasty) {
        authorInfo.dynasty = dynasty.value[0].did
    } else if(regx.test(authorInfo.dynasty)) {
        dynasty.value.forEach((item: IDynastyModel) => {
            if(authorInfo.dynasty == item.d_name) authorInfo.dynasty = item.did
        })
    }
    if(type.value == 'change') {
        manageAuthorSe.getUpadateAuthorById(authorInfo).then((res: any) => {
            if(res.status == 'success') {
                ElMessage({
                    showClose: true,
                    message: '修改成功！',
                    type: 'success',
                })
                emits('onCloseEditAuthorAlert')
                console.log('searchType.value', searchType.value)
                if(searchType.value && searchType.value != '') {
                    emits('searchInfo', searchType.value, searchInput.value)
                } else {
                    emits('getAuthorList')
                }
            } else {
                ElMessage({
                    showClose: true,
                    message: '修改失败！',
                    type: 'error',
                })
            }
        })
    } else {
        manageAuthorSe.getAddAuthor(authorInfo).then((res: any) => {
            if(res.status == 'success') {
                isShowAlert.value = 'addSuccess'
            } else {
                isShowAlert.value = 'addFailure'
            }
        })
    }
}

// 获取朝代信息
let dynastyName = ref<string>('')
let dynasty = ref<IDynastyModel[]>([])
const getDynasty = () => {
    manageAuthorSe.getDynasty().then((res: any) => {
        if(res.status == 'success') {
            dynasty.value = res.results
        }
    })
}

onMounted(() => {
    getDynasty()
})
</script>

<style lang="less" scoped>
.d-a_other-info {
    min-width: 20rem;
    tr {
        height: 3rem;
        vertical-align: top;
        .r-title {
            padding-top: 0.4rem;
        }
        td {
            text-align-last: justify;
            input {
                height: 2rem;
                line-height: 2rem;
                padding: 0 0.5rem;
                padding-right: 1.5rem;
                border-radius: 0.3rem;
                border: 1px solid var(--pc-border-gray);
                text-align-last: left;
            }
        }
        textarea {
            text-align-last: left;
        }
        :deep(.el-select) {
            .el-input__inner {
               text-align-last: left;
           }
        }
    }
}
</style>